<!-- 表单 》 滑块 -->

<template>
  <el-form-item v-bind="formItem">
    <!-- 标签 -->
    <template v-if="hasLabelSlot" #label>
      <slot name="label" :label="formItem.label">{{ formItem.label }}</slot>
    </template>

    <el-slider v-model="model" v-bind="sliderProps" :range="false" @change="emitChange" />
  </el-form-item>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import mixForm from '../mixForm'
import FormNum from '../FormNum'

const name = 'FormSlider'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name,

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [mixForm],

  /**
   * 属性注册 (抽取以便查阅)
   */
  props: CORE.WEB[name],

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 是否只能为步长 (仅为使用 FormNum 的方法而加)
     */
    onlyStep: () => true,

    /**
     * 判断步长的倍数 (同上)
     */
    multiple: () => 1,

    /**
     * 滑块属性
     */
    sliderProps() {
      const { commonProps, className, min, max, step, marks, showStops, vertical, height, showInput } = this
      return {
        ...commonProps,
        class: marks ? `${className} ${className}-has-masks` : className,
        min,
        max,
        step,
        marks,
        showStops,
        showTooltip: !this.noTip,
        formatTooltip: this.transTip,
        vertical,
        height,
        showInput,
        showInputControls: !this.noInputBtn,
      }
    },
  },

  /**
   * 监听属性 (深度 deep 首次 immediate)
   */
  watch: FormNum.watch,

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    ...FormNum.methods,

    /**
     * 重新设置内部绑定值
     */
    resetModel() {
      this.emitChange()
    },
  },
}
</script>
